<template>
  <div class="page-container">
    <div class="max-w-4xl mx-auto pt-6 px-4">
      <div class="page-header">
        <h1 class="page-title">意见反馈</h1>
        <p class="page-description">您的每一条建议都是我们前进的动力</p>
      </div>
      <div v-if="submitted" class="success-message bg-white rounded-2xl shadow-sm p-6 animate-fadeIn">
        <div class="success-icon">
          <div class="i-carbon-checkmark-filled text-6xl color-green-500"></div>
        </div>
        <h2 class="success-title">提交成功</h2>
        <p class="success-description">感谢您的反馈！我们将认真对待您的建议，持续优化产品体验。</p>
        <button @click="submitted = false" class="secondary-btn mt-4 cursor-pointer">继续提交</button>
      </div>
      <div v-else class="bg-white rounded-2xl shadow-sm p-6 mb-8">
        <form @submit.prevent="handleSubmit">
          <div class="mb-6">
            <label for="feedbackType" class="form-label">反馈类型</label>
            <div class="feedback-type-options">
              <label
                v-for="item in feedbackTypes"
                :key="item.value"
                :class="{ active: feedbackType === item.value }"
                class="feedback-type-option p-2"
              >
                <input type="radio" v-model="feedbackType" :value="item.value" class="hidden" />
                <div class="feedback-type-icon">
                  <div class="i-carbon-idea text-4xl"></div>
                </div>
                <div class="feedback-type-name color-#555">{{ item.label }}</div>
              </label>
            </div>
          </div>
          <div class="mb-6">
            <label for="content" class="form-label">反馈内容</label>
            <div class="input-wrapper">
              <textarea
                id="content"
                v-model="content"
                class="form-input"
                placeholder="请详细描述您的建议或遇到的问题..."
                rows="3"
                required
                maxlength="300"
              ></textarea>
            </div>
          </div>

          <div class="mb-6">
            <label for="contact" class="form-label">联系方式（选填）</label>
            <div class="input-wrapper">
              <input id="contact" v-model="contact" class="form-input" placeholder="您的邮箱或电话，方便我们与您联系" />
            </div>
          </div>

          <div class="flex justify-center mt-8">
            <button
              type="submit"
              class="primary-btn cursor-pointer"
              :disabled="isSubmitting || !content.trim()"
              :class="{ 'opacity-60 cursor-not-allowed': isSubmitting || !content.trim() }"
            >
              <span v-if="isSubmitting" class="i-carbon-renew animate-spin mr-2"></span>
              {{ isSubmitting ? '提交中...' : '提交反馈' }}
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { FeedbackType, queryCreateFeedBack } from '~/apis/feedback';
import { ElMessage } from 'element-plus';

const feedbackType = ref(FeedbackType.SUGGESTION);
const content = ref('');
const contact = ref('');
const submitted = ref(false);
const isSubmitting = ref(false);

const feedbackTypes = [
  {
    label: '功能建议',
    value: 'SUGGESTION',
  },
  {
    label: '问题反馈',
    value: 'BUG',
  },
  {
    label: '其他',
    value: 'OTHER',
  },
];

const handleSubmit = async () => {
  isSubmitting.value = true;
  await queryCreateFeedBack({
    type: feedbackType.value,
    content: content.value,
    contact: contact.value,
  }).finally(() => {
    isSubmitting.value = false;
  });
  submitted.value = true;
  ElMessage.success('提交成功');
  resetForm();
};

const resetForm = () => {
  content.value = '';
  contact.value = '';
  feedbackType.value = FeedbackType.SUGGESTION;
};
</script>

<style scoped>
.page-container {
  background-color: #f7f8fb;
}

.page-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.page-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-purple, #6b46c1);
  margin-bottom: 0.5rem;
}

.page-description {
  color: var(--text-secondary, #64748b);
  font-size: 1.1rem;
}

.form-label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--text-primary, #1e293b);
}

.input-wrapper {
  position: relative;
}

.form-input {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #1e293b;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.form-input:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2);
  outline: none;
}

.feedback-type-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}

.feedback-type-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 1rem;
  background-color: #f8fafc;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.feedback-type-option.active {
  border-color: var(--primary-purple, #6b46c1);
  background-color: #f3f0ff;
}

.feedback-type-icon {
  margin-bottom: 0.75rem;
  color: var(--primary-purple, #6b46c1);
}

.feedback-type-name {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-purple, #6b46c1);
  color: white;
  font-weight: 600;
  padding: 0.75rem 2.5rem;
  border-radius: 9999px;
  transition: all 0.2s;
  box-shadow: 0 4px 6px rgba(107, 70, 193, 0.2);
}

.primary-btn:hover:not(:disabled) {
  background-color: var(--secondary-purple, #805ad5);
  transform: translateY(-1px);
  box-shadow: 0 6px 8px rgba(107, 70, 193, 0.3);
}

.primary-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(107, 70, 193, 0.3);
}

.secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-purple, #6b46c1);
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  background-color: #f3f0ff;
  transition: all 0.2s;
}

.secondary-btn:hover {
  background-color: #e9d5ff;
}

.success-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 1.5rem;
}

.success-icon {
  margin-bottom: 1.5rem;
}

.success-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  margin-bottom: 1rem;
}

.success-description {
  color: var(--text-secondary, #64748b);
  max-width: 28rem;
  margin: 0 auto;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-out forwards;
}
</style>
